<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
          body,#frame{
 background-color: #000000
          }
          #img {
    	width:auto;

		}
      </style>
  </head>
  <body>
    <div id="frame" style="margin:auto; text-align:center">
<img src="" id="img"           class="imgCache"   >
 </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script  type="text/javascript"  src="../script/jquery-2.1.1.min.js"></script>
   <script  type="text/javascript"  src="../script/jquery.md5.js"></script>
  <script type="text/javascript" src="../script/common.js"></script>

  <script type="text/javascript">
      apiready = function(){
  $api.attr($api.byId('img'),'srcs', api.pageParam.id );
 $api.css($api.byId('frame'),'height:'+api.winHeight- api.safeArea.top- 50+"px");
 $api.attr($api.byId('img'),'height',api.winHeight- api.safeArea.top- 50);
 console.log(api.winHeight)
       _zyzImgCache()
      };
  </script>
  </html>
